<template>
  <div class="data-filter-page">
    <el-row :gutter="16" align="stretch">
      <!-- 数据过滤配置 -->
      <el-col :span="8">
        <el-card class="card-block">
          <div class="card-header">
            <span>数据过滤配置</span>
            <el-link type="primary" @click="showLog = true" style="float:right; font-size: 13px">查看日志</el-link>
          </div>
          <div class="slider-label">偏差阈值设置</div>
          <el-slider v-model="filterThreshold" :min="-10" :max="10" :step="0.1" show-stops :format-tooltip="formatSliderTooltip" />
          <div class="slider-value">{{ filterThreshold > 0 ? '+' : '' }}{{ filterThreshold }}%</div>
          <div class="sensor-list">
            <div v-for="sensor in sensors" :key="sensor.name" class="sensor-item">
              <span>{{ sensor.label }}</span>
              <el-switch v-model="sensor.enabled" size="small" />
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 噪声处理设置 -->
      <el-col :span="8">
        <el-card class="card-block">
          <div class="card-header">
            <span>噪声处理设置</span>
            <el-link type="primary" @click="goToCompare" style="float:right; font-size: 13px">效果对比</el-link>
          </div>
          <el-form label-width="80px" size="small">
            <el-form-item label="传感器类型">
              <el-select v-model="noiseSensorType" placeholder="请选择">
                <el-option v-for="item in sensors" :key="item.name" :label="item.label" :value="item.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="卡尔曼滤波">
              <el-switch v-model="kalmanEnabled" />
            </el-form-item>
            <el-form-item label="Q值">
              <el-input-number v-model="kalmanQ" :min="0.01" :max="1" :step="0.01" :precision="2" />
            </el-form-item>
            <el-form-item label="R值">
              <el-input-number v-model="kalmanR" :min="0.01" :max="1" :step="0.01" :precision="2" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <!-- 数据聚合管理 -->
      <el-col :span="8">
        <el-card class="card-block">
          <div class="card-header">
            <span>数据聚合管理</span>
            <el-link type="primary" @click="goToStats" style="float:right; font-size: 13px">统计信息</el-link>
          </div>
          <el-form label-width="80px" size="small">
            <el-form-item label="时间窗口">
              <el-select v-model="aggWindow" placeholder="请选择">
                <el-option label="10秒" value="10s" />
                <el-option label="1分钟" value="1m" />
                <el-option label="5分钟" value="5m" />
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型">
              <el-checkbox-group v-model="aggTypes">
                <el-checkbox v-for="item in sensors" :key="item.name" :label="item.name">{{ item.label }}</el-checkbox>
                <el-checkbox label="position">位置数据</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="onlyUploadAbnormal">仅上传异常波动数据</el-checkbox>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 效果图表 -->
    <el-row :gutter="16" style="margin-top: 16px;">
      <el-col :span="12">
        <el-card class="card-block">
          <div class="card-header">数据过滤效果</div>
          <div ref="filterChart" style="height:220px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="card-block">
          <div class="card-header">数据聚合效果</div>
          <div ref="aggChart" style="height:220px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统状态 -->
    <el-card class="card-block" style="margin-top: 16px;">
      <div class="status-row">
        <div class="status-item">
          <div class="status-label">运行状态</div>
          <div class="status-value"><el-tag type="success">正常</el-tag></div>
        </div>
        <div class="status-item">
          <div class="status-label">处理速度</div>
          <div class="status-value">{{ sysStatus.speed }} 条/秒</div>
        </div>
        <div class="status-item">
          <div class="status-label">异常数据</div>
          <div class="status-value"><el-tag type="warning">{{ sysStatus.abnormalRate }}%</el-tag></div>
        </div>
        <div class="status-item">
          <div class="status-label">丢弃数据</div>
          <div class="status-value"><el-tag type="danger">{{ sysStatus.dropRate }}%</el-tag></div>
        </div>
      </div>
    </el-card>

    <!-- 过滤日志弹窗 -->
    <el-dialog title="过滤日志" :visible.sync="showLog" width="600px">
      <el-table :data="filterLogs" size="small" style="width:100%">
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="sensor" label="传感器" width="120" />
        <el-table-column prop="value" label="原始值" width="100" />
        <el-table-column prop="reason" label="过滤原因" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showLog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DataFilter',
  data() {
    return {
      // 数据过滤配置
      filterThreshold: 5,
      sensors: [
        { name: 'temp', label: '温度传感器', enabled: true },
        { name: 'pressure', label: '压力传感器', enabled: true },
        { name: 'vibration', label: '振动传感器', enabled: false },
      ],
      // 过滤日志
      showLog: false,
      filterLogs: [
        { time: '2024-06-01 10:01:23', sensor: '温度传感器', value: '32.5', reason: '超出阈值(+5%)' },
        { time: '2024-06-01 10:02:10', sensor: '压力传感器', value: '1.12', reason: '超出阈值(-5%)' },
      ],
      // 噪声处理
      noiseSensorType: 'vibration',
      kalmanEnabled: true,
      kalmanQ: 0.1,
      kalmanR: 0.1,
      // 数据聚合
      aggWindow: '10s',
      aggTypes: ['temp'],
      onlyUploadAbnormal: true,
      // 系统状态
      sysStatus: {
        speed: 1200,
        abnormalRate: 0.02,
        dropRate: 0.01
      },
      // 图表数据
      filterChartData: [98, 97, 99, 98, 97, 99, 98],
      aggChartOrigin: [90, 85, 88, 87, 86, 89, 88],
      aggChartAgg: [70, 68, 69, 70, 67, 68, 69],
      timeLabels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
    }
  },
  mounted() {
    this.renderCharts()
  },
  methods: {
    formatSliderTooltip(val) {
      return val + '%'
    },
    renderCharts() {
      // 过滤效果
      const fChart = echarts.init(this.$refs.filterChart)
      fChart.setOption({
        tooltip: {},
        xAxis: { type: 'category', data: this.timeLabels },
        yAxis: { type: 'value', min: 0, max: 100 },
        series: [{
          name: '数据质量',
          type: 'line',
          data: this.filterChartData,
          smooth: true,
          symbol: 'circle',
          lineStyle: { width: 2 },
        }]
      })
      // 聚合效果
      const aChart = echarts.init(this.$refs.aggChart)
      aChart.setOption({
        tooltip: {},
        legend: { data: ['原始数据', '聚合后数据'] },
        xAxis: { type: 'category', data: this.timeLabels },
        yAxis: { type: 'value', min: 0, max: 100 },
        series: [
          {
            name: '原始数据',
            type: 'bar',
            data: this.aggChartOrigin,
            barGap: 0,
            itemStyle: { opacity: 0.5 }
          },
          {
            name: '聚合后数据',
            type: 'bar',
            data: this.aggChartAgg,
          }
        ]
      })
    },
    goToCompare() {
      this.$message.info('跳转到数据波形对比页（待实现）')
    },
    goToStats() {
      this.$message.info('跳转到传输统计页（待实现）')
    }
  }
}
</script>

<style scoped>
.data-filter-page {
  padding: 16px;
  background: #f5f6fa;
}
.el-col {
  height: 100%;
}
.card-block {
  border-radius: 8px;
  margin-bottom: 0;
  min-height: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-header {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider-label {
  margin-top: 10px;
  font-size: 13px;
  color: #888;
}
.slider-value {
  margin-bottom: 10px;
  font-size: 13px;
  color: #666;
}
.sensor-list {
  margin-top: 10px;
}
.sensor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-item {
  flex: 1;
  text-align: center;
}
.status-label {
  color: #888;
  font-size: 13px;
}
.status-value {
  font-size: 18px;
  margin-top: 4px;
}
</style>
